import 'package:flutter/material.dart';
import 'package:xbaistack/common/dates.dart';
import 'package:xbaistack/common/toast.dart';
import 'package:xbaistack/widget/bottom_sheet/data_picker.dart';
import 'package:xbaistack/widget/click_able.dart';

import 'package:xbaistack/widget/form/formx_inputs.dart';
import 'package:xbaistack/widget/form/formx_validator.dart';
import 'package:xbaistack/widget/form/formx_widget.dart';
import 'package:xbaistack/widget/my_button.dart';

import '../model/option.dart';

class FormPage extends StatefulWidget {
  const FormPage({super.key});

  @override
  State<StatefulWidget> createState() => _FormPageState();
}

class _FormPageState extends State<FormPage> {
  late final FormController controller = FormController();

  bool enabled = true;
  Map<String, dynamic> initialValue = {};

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("form 表单组件"),
        actions: [
          Padding(
            padding: const EdgeInsets.only(right: 12),
            child: Clickable(
              onTap: () => setState(() {
                enabled = !enabled;
                initialValue = controller.getValue();
              }),
              child: Text(enabled ? "查看" : "编辑"),
            ),
          ),
        ],
      ),
      body: Column(
        children: [
          Expanded(
            child: FormInput(
              enabled: enabled,
              controller: controller,
              showErrors: true,
              validateOnInput: true,
              initialValue: initialValue,
              children: [
                Input.switcher(
                  name: "enabled",
                  label: "是否启用",
                  subtitle: "这是子标题子标题子标题子标题子标题子标题子标题子标题子标题",
                  onChanged: (value) => print(value),
                ),
                Input.numberStepper(
                  name: 'prices',
                  label: '商品数量',
                  minValue: 10,
                  maxValue: 30000,
                  suffix: '个',
                ),
                Input.select(
                  name: 'hobby',
                  label: '爱好',
                  options: [
                    Option(label: 'football', value: 'football'),
                    Option(label: 'basketball', value: 'basketball'),
                    Option(label: 'swimming', value: 'swimming'),
                  ],
                ),
                Input.selectList(
                  name: 'multipe',
                  label: '多选',
                  options: [
                    Option(label: 'football', value: 'football'),
                    Option(label: 'basketball', value: 'basketball'),
                    Option(label: 'swimming', value: 'swimming'),
                  ],
                ),
                Input.regional(
                  name: "regional",
                  label: "地区选择（省市区）",
                  required: true,
                ),
                Input.number(
                  name: 'height',
                  label: '身高选择',
                  minValue: 10,
                  maxValue: 30,
                  suffix: 'cm',
                  postfix: '',
                ),
                Input.leading("输入类组件"),
                Input.datetime(
                  name: 'datetime',
                  label: '生日',
                  formatter: DateTimeFormatter.YYYY_MM_DD,
                  transformer: (val) {
                    return Dates.format(
                      DateTimeFormatter.YYYY_MM_DD.format,
                      val,
                    );
                  },
                  // converter: (val) {
                  //   print(val);
                  //   return Dates.convert(DateTime.now().microsecond);
                  // },
                ),
                Input.spacer(),
                Input.datetime(
                  name: 'startTme',
                  required: true,
                  label: '开始日期',
                  title: "选择开始日期",
                  maxValueBy: 'endtTme',
                  // maxValue: DateTime.now().copyWith(year: 2020),
                  formatter: DateTimeFormatter.YYYY_MM_DD,
                ),
                Input.datetime(
                  name: 'endtTme',
                  label: '结束日期',
                  title: "选择开始日期",
                  minValueBy: 'startTme',
                  formatter: DateTimeFormatter.YYYY_MM_DD,
                ),
                Input.text(
                  name: "username",
                  label: "用户名",
                  placeholder: "请输入用户名",
                  required: true,
                  validator: [
                    Validator.limited(3, 10),
                    Validator.excludes(["admin"]),
                  ],
                ),
                Input.password(
                  name: "password",
                  label: "密码",
                  required: true,
                  hideOnDisabled: true,
                ),
                Input.password(
                  name: "re-password",
                  label: "确认密码",
                  required: true,
                  hideOnDisabled: true,
                  validator: [Validator.equals(controller.form, "password")],
                ),
                Input.spacer(),
                Input.textarea(
                  name: "textarea",
                  label: "备注信息",
                  placeholder: "请输入你的备注信息",
                  maxLines: 5,
                  maxLength: 100,
                  showCounter: true,
                ),
                Input.leading("验证码"),
                Input.mobile(
                  name: "mobile",
                  label: "手机号码",
                  placeholder: "请输入你的手机号码",
                  maxLength: 11,
                  required: true,
                  // hideOnDisabled: true,
                ),
                Input.spacer(hideOnDisabled: true),
                Input.text(
                  name: "smsCode",
                  label: "验证码",
                  placeholder: "请输入你收到的6位验证码",
                  maxLength: 6,
                  showCounter: false,
                  required: true,
                  hideOnDisabled: true,
                ),
                Input.captcha(
                  name: "captcha",
                  label: "图形验证码",
                  placeholder: "请输入右侧图片上的字符",
                  maxLength: 4,
                  hideOnDisabled: true,
                ),
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 15),
            child: Row(
              children: [
                Flexible(
                  child: MyButtons(
                    text: '校验',
                    onTap: () {
                      if (controller.validate()) {
                        Toast.showSuccess("验证通过");
                      } else {
                        final errors = controller.getErrors();
                        Toast.showError(errors.entries.first.value);
                        print("---------------- Validate ----------------");
                        errors.forEach((k, v) => print("$k : $v"));
                        print("------------------------------------------");
                      }
                    },
                  ),
                ),
                const SizedBox(width: 10),
                Flexible(
                  flex: 2,
                  child: MyButtons(
                    text: "提取表单数据",

                    onTap: () {
                      print(
                        "------------------- FormValue --------------------",
                      );
                      controller.getValue().forEach((k, v) => print("$k : $v"));
                      print(
                        "--------------------------------------------------",
                      );
                    },
                  ),
                ),
                const SizedBox(width: 10),
                Flexible(
                  child: MyButtons(
                    text: "重置",
                    radius: BorderRadius.circular(6),
                    onTap: () => controller.reset(),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
